<template>
	<div>
		<!-- 刚打开页面，后台数据加载完成之前显示的div -->
		<div v-if="!repoUrl">loading...</div>
		<!-- 后台数据加载完毕显示的div -->
		<div v-else="">most stat repo is <a v-bind:href="repoUrl">{{repoName}}</a></div>
	</div>
</template>

<script>
	import axios from 'axios' // 这个通用的ajax插件，一般是在哪里用就在哪里引入
	export default {
		data() {
			return {
				repoUrl:'',
				repoName:''
			}
		},
		
		// 初始化操作
		mounted () {
			// 发送ajax请求，请求后台数据  第一种方式
			const url = 'https://api.github.com/search/repositories?q=v&sort=stars'; // 该接口为 github上的免费接口
			/* this.$http.get(url).then(
				response => { // 成功
					const result = response.data;
					const mostRepo = result.items[0];
					this.repoUrl = mostRepo.html_url;
					this.repoName = mostRepo.name;
				},
				response => { // 失败
					alert("请求失败");
				}
			); */
			
			// 使用axios发送ajax请求的方式  第二种方式
			axios.get(url).then(
				response => { // 成功
					const result = response.data;
					const mostRepo = result.items[0];
					this.repoUrl = mostRepo.html_url;
					this.repoName = mostRepo.name;
				}
				
				// 失败的方式二
				/* response => { 
					alert("请求失败");
				} */
			).catch(error => {
				alert("请求失败1");
			});
			
		}
	}
</script>

<style>

</style>
